<template>
  <view class="product-list">
    <template v-if="list.length > 0">
      <view class="product-item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
        <view class="image" v-if="item.image">
          <!--<image width="100rpx" height="100rpx" mode="widthFix" :src="baseUrl + item.mainImage.path" />-->
          <u--image  width="300rpx" height="300rpx" mode="widthFix" lazy-load :fade="true" duration="450" :src="baseUrl + item.image.path"></u--image>
        </view>
        <template v-if="item.product">
          <view class="title two-lines">{{ item.product.title }}</view>
          <price :price="parseFloat(item.price)" :old-price="parseFloat(item.product.price)" class="price" />
          <view class="sell">已售: {{ item.product.sell_count }}</view>
        </template>
      </view>
    </template>
    <view class="nothing" v-else-if="showNothing">暂无商品...</view>
  </view>
</template>

<script>
import Price from '../../components/price/index'
import config from '../../config/config'
export default {
  components: {
    Price
  },
  props: {
    list: {
      type: Array,
      default: []
    },
    showNothing: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl
    }
  },
  methods: {
    goDetail(item) {
      uni.navigateTo({
        // url: `/sub_product/detail/index?id=${item.id}`
        url: `/sub_product/detail/index?id=${item.product.id}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.product-list {
  display: flex;
  //margin: 20rpx;
  justify-content: space-between;
  flex-wrap: wrap;
  .product-item {
    padding: 20rpx;
    border-radius: 20rpx;
    background: white;
    margin-bottom: 20rpx;
    width: calc(50% - 10rpx);
    box-sizing: border-box;
    .image {
      padding: 0rpx 0 10rpx 0;
      //background: red;
      max-height: 300rpx;
      width: 300rpx;
      margin: 0 auto;
      box-sizing: border-box;
      image {
        display: block;
        width: 100%;
        height: 100%;
        margin: auto;
      }
    }
    .title {
      font-weight: 700;
      font-size: 26rpx;
      //line-height: 44rpx;
    }
    .sell {
      font-size: 24rpx;
      color: #ccc;
    }
  }
  .nothing {
    text-align: center;
    width: 100%;
    background: white;
    font-size: 24rpx;
    line-height: 100px;
    color: #ccc;
    margin-bottom: 10px;
    border-radius: 10rpx;
  }
}
</style>
